<template>
	<view>
		<u-navbar :is-back="false" title="" 
		:border-bottom="fromUserId==vuex_userInfo.id"  
		:height="200" :background="navBarBackground">
			<view style="width: 100%;height: 200px;padding:20rpx 30rpx;" class="">
				<view class="u-flex u-row-between u-col-center" style="width: 100%;height:10%">
					<view @click="goBack()">
						<u-icon name="arrow-left" :size="34" color="#ffffff"></u-icon>
					</view>
					<view>
						<u-icon name="more-dot-fill" color="#ffffff" :size="34"></u-icon>
					</view>
				</view>
				<view style="width: 100%;height:80%;" class="u-flex u-row-center u-col-center u-p-t-30">
					<view>
						 <view  class="u-flex u-row-center u-col-center u-p-t-80">
							  <view class="u-m-r-20">
									<u-image :src="redbagInfo.userAvatar" 
											width="46rpx" height="46rpx" border-radius="8">
										<view slot="error">
											<u-image width="46rpx" height="46rpx" src="/static/image/default/default-user/default-user.png" border-radius="8"></u-image>
										</view>
									</u-image>
							  </view>	
							  <view  class="u-flex u-row-left u-col-center">
								<view style="font-size: 32rpx;font-weight:bold;">{{redbagInfo.userName}}发出的红包</view>
								<view v-if="redbagInfo.content.redBagType==1&&redbagInfo.content.redBagRule==1"
								  style="width: 32rpx;height: 32rpx;text-align: center;color: #f29100;border: 1rpx solid #f29100;font-size:20rpx;margin-left:10rpx;line-height: 32rpx;">拼</view>
							  </view>
						 </view>
						 <view style="text-align: center;margin-top: 16rpx;color: #909399;">
							  <text>{{redbagInfo.content.redBagRemark}}</text>
						 </view>
					 </view>
				</view>
				<!-- 点对点红包 -->
				<view 	v-if="redbagType==0"
						style="width: 100%;height:10%;color: #909399;" 
						class="u-flex u-row-left u-col-bottom u-p-l-10">
					<!-- 没有被领取 -->
					<view v-if="receiveAllFlag==false">
						红包金额{{Number(redbagInfo.content.tradeRecord.tradeValue).toFixed(2)}}元,等待对方领取
					</view>
					<!--我发的红包，已经被领取时查看的信息展示 -->
					 <view v-if="receiveAllFlag==true&&fromUserId==vuex_userInfo.id">
						1个红包共{{Number(redbagInfo.content.tradeRecord.tradeValue).toFixed(2)}}元
					 </view>
				</view>
				<!-- 群组红包 -->
				<view v-else>
					<view :class="fromUserId!=vuex_userInfo.id?'u-border-bottom u-p-b-10 u-tips-color':'u-tips-color'">
						{{formatGroupRedbagDesc()}}
					</view>
				</view>
			</view>		
		</u-navbar>
		<!-- 个人红包被领取后-->
		<template  v-if="receiveAllFlag==true&&redbagType==0">
			<!-- 自己查看领取的红包信息 for 领取人-->
			<view  v-if="fromUserId!=vuex_userInfo.id" 
					style="text-align: center;color: #bfa477;width: 100%;position: absolute;top: 190px;">
				<view>
					<text style="font-size: 84rpx;font-weight: bold;">
						 {{Number(redbagInfo.content.tradeRecord.tradeValue).toFixed(2)}}
					</text>
					<text style="margin-left: 10rpx;">元</text>
				</view>
				<view class="u-m-t-20 u-m-b-40 u-font-26 u-flex u-row-center u-col-center" style="width: 100%;">
					<view>已存入零钱,可直接转账</view>
					<view>
						<u-icon name="arrow-right" color="#bfa477" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center u-col-center">
					<view	class="u-flex u-row-center u-col-center"
							style="width:300rpx;background-color: #ebebeb;border-radius: 10rpx;padding: 30rpx;">
						<view>
							<u-image src="/static/image/chat/redbag/face.png" width="36rpx" height="36rpx"></u-image>
						</view>
						<view class="u-m-l-8">
							<text>回复表情到聊天</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 发红包的人查看红包领取的信息，for 发红包的人 -->
			<view v-else>
				<view v-if="receiveUsers&&receiveUsers.length>0"
					 class="u-p-l-30 u-p-r-30">
					<view 	class="u-flex u-row-between u-col-center"
							v-for="(receiver,index) in receiveUsers" :key="index">
						<view style="width: 15%;">
							<u-image width="80rpx" height="80rpx"  border-radius="12" :src="receiver.userAvatar">
								<view slot="error">
									<u-image width="60rpx" height="60rpx"
									src="/static/image/default/default-user/default-user.png" border-radius="12"></u-image>
								</view>
							</u-image>
						</view>
						<view style="width: 85%;" class="u-border-bottom u-p-b-20 u-p-t-20">
							<view class="u-flex u-row-between u-col-center">
								<view>
									{{receiver.userName}}
								</view>
								<view>
									{{receiver.tradeValue?Number(receiver.tradeValue).toFixed(2):'**'}}元
								</view>
							</view>
							<view class="u-tips-color u-font-26 u-m-t-8">
								<text>{{globalUtil.getTimeStr(receiver.receiveTime,'M')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 群组红包领取记录展示 -->
		<template v-if="redbagType==1">
			<view v-if="receiveUsers&&receiveUsers.length>0"  
				 class="u-p-l-30 u-p-r-30">
				<view 	class="u-flex u-row-between u-col-center"
						v-for="(receiver,index) in receiveUsers" :key="index">
					<view style="width: 15%;">
						<u-image width="80rpx" height="80rpx"  border-radius="12" :src="receiver.userAvatar">
							<view slot="error">
								<u-image width="60rpx" height="60rpx"
								src="/static/image/default/default-user/default-user.png" border-radius="12"></u-image>
							</view>
						</u-image>
					</view>
					<view style="width: 85%;" class="u-border-bottom u-p-b-20 u-p-t-20">
						<view class="u-flex u-row-between u-col-center">
							<view>
								{{receiver.userName}}
							</view>
							<view>
								{{receiver.tradeValue?Number(receiver.tradeValue).toFixed(2):'**'}}元
							</view>
						</view>
						<view class="u-tips-color u-font-26 u-m-t-8">
							<text>{{globalUtil.getTimeStr(receiver.receiveTime,'H')}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view 	v-if="redbagInfo.content.receiveAllFlag==false"
				style="position: absolute;width: 100%;bottom:50px;text-align: center;color: #909399;">
			<text>
				未领取的红包,将于24小时后发起退款
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarBackground:{
					backgroundImage:"url(/static/image/chat/redbag/red-bg-1.png)",
					backgroundRepeat: 'no-repeat',
					backgroundSize: 'cover',
				},
				redbagInfo:null,//当前红包信息
				fromUserId:null,//发红包的人
				receiveUsers:[],//领取红包的用户领取记录
				redbagType:0, //红包的类型  0是点对点收发红包 1是群红包
				receiveAllFlag:false,
			};
		},
		onLoad:function(option){
			let that=this;
			let redbagMsg= option.redbagMsg;
			if(redbagMsg){
			 	this.redbagInfo= JSON.parse(decodeURIComponent(redbagMsg));
				console.log("红包信息",this.redbagInfo);
				this.redbagType= this.redbagInfo.content.redBagType;
				this.fromUserId= this.redbagInfo.content.fromUserId;
				if(this.fromUserId==this.vuex_userInfo.id){
					this.redbagInfo.userName="我";
				};
				this.receiveUsers= this.redbagInfo.content.receiveUsers;
				this.receiveAllFlag= this.redbagInfo.content.receiveAllFlag;
			}
			//监听新的信息,监听事件来自于全局socket信息处理文件message.js
			uni.$on("updateRedBagDetail", function(redBagMsgId) {
				console.log("监听到新的领取记录",redBagMsgId);
				if(that.redbagInfo.id==redBagMsgId){
					let param={msgId:redBagMsgId};
					this.$u.api.chatGroup.getTransferReceiveRecords(param).then(res => {
						if(res.code==200){
							let receiveRecords=res.data;
							console.log("全部领取记录",receiveRecords);
							if(receiveRecords){
								that.receiveUsers=receiveRecords
							}
						}
					})
				}
			});
		},
		beforeDestroy: () => {
			uni.$off("updateRedBagDetail");
		},
		methods:{
			goBack:function(){
				uni.navigateBack();
			},
			formatGroupRedbagDesc:function(){
				let redbagValue= this.redbagInfo.content.redBagValue;
				let redBagNum=this.redbagInfo.content.redBagNums;
				if(this.receiveAllFlag){
					return "已被领完,共"+redBagNum+"个,"+redbagValue+"元";
				}else{
					//有领取记录
					if(this.receiveUsers.length>0){
						let count=this.receiveUsers.length;
						let sumVal=0.00;
					    for (let receive of this.receiveUsers) {
					    	sumVal=sumVal+Number(receive.tradeValue);
					    }
						return "已经领取"+count+"/"+redBagNum+"个，共"+sumVal+"/"+redbagValue+"元";
					}
					//没有领取
					else{
						return "等待领取，"+redBagNum+"个，共"+redbagValue+"元";
					}
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f0f0f0;
}
</style>
